<template>
  <div>
    <mbx lenev="首页" lenev1="商品管理" lenev2="参数列表"></mbx>
    <el-card style="margin-top: 20px">
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon>
      </el-alert>
      <p>
        选择商品分类：<el-cascader
          ref="xiaoshi"
          v-model="spcheck"
          clearable
          :options="spshuju"
          :props="sppz"
          @change="Change"
        >
        </el-cascader>
      </p>

      <el-dialog title="添加动态参数" :visible.sync="dialogFormVisible" @close="guanbi">
        <el-form :model="form" :rules="rules" ref="refms">
          <el-form-item label="参数名称" label-width="80px" prop="attr_name">
            <el-input v-model="form.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addcan">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑动态参数" :visible.sync="dialogFormVisiblebj" @close="guanbi">
        <el-form :model="form" :rules="rules" ref="refms">
          <el-form-item label="参数名称" label-width="80px" prop="attr_name">
            <el-input v-model="form.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblebj = false">取 消</el-button>
          <el-button type="primary" @click="biancan">确 定</el-button>
        </div>
      </el-dialog>

      <el-tabs v-model="activename" @tab-click="handle">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            size="small"
            :disabled="iss"
            @click="dialogFormVisible = true"
            >添加参数</el-button
          >
          <el-table border :data="manyarr" class="mt15">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(item, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                  >
                    {{ item }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="bjtianjia(scope.row)"
                    @blur="shijiao(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                   <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="bianji(scope.row)"
                    >编辑</el-button
                  >
                    <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="del(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button
            type="primary"
            size="small"
            :disabled="iss"
            @click="dialogFormVisible = true"
            >添加属性</el-button
          >
          <el-table border :data="onlyarr" class="mt15">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    :key="index"
                    v-for="(item, index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index, scope.row)"
                  >
                    {{ item }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="bjtianjia(scope.row)"
                    @blur="shijiao(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                   <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="bianji(scope.row)"
                    >编辑</el-button
                  >
                    <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="del(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attrvals:[],
      dialogFormVisible: false,
      dialogFormVisiblebj: false,
      form: {
        attr_name: "",
      },
      attrId: "",
      activename: "many",
      spcheck: [], //三级分类选中
      spshuju: [], //商品数据
      sppz: {
        expandTrigger: "hover",
        label: "cat_name",
        children: "children",
        value: "cat_id",
        checkStrictly: true,
      }, //渲染规则
      manyarr: [],
      onlyarr: [],
      rules: {
        attr_name: [{ required: true, message: "请输入参数名", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getgoods();
  },
  methods: {
    // 编辑参数
    bianji(row) {
      this.dialogFormVisiblebj = true;
      this.form.attr_name = row.attr_name;
      this.attrId = row.attr_id;
      this.attrvals=row.attr_vals;

    },
    biancan() {
      this.$refs.refms.validate(async (valid) => {
        if (!valid) return;
        await this.$API.Bjcan(this.flid, this.attrId, {
          attr_name: this.form.attr_name,
          attr_sel: this.activename,
          attr_vals:this.attrvals.join(","),
        });
        this.dialogFormVisiblebj = false;
        this.form.attr_name = "";
        this.getcan();
      });
    },
    guanbi() {
      this.form.attr_name = "";
    },
    addcan() {
      this.$refs.refms.validate(async (valid) => {
        if (!valid) return;
        const res = await this.$API.Tianjiacan(this.flid, {
          attr_name: this.form.attr_name,
          attr_sel: this.activename,
        });
        this.getcan();
        this.dialogFormVisible = false;
        this.form.attr_name = "";
      });
    },
    // 切换按钮和input
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus();
      });
    },
    // 删除参数tag
    async handleClose(index, row) {
      row.attr_vals.splice(index, 1);
      const res = await this.$API.Bjcan(this.flid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activename,
        attr_vals: row.attr_vals.join(","),
      });
      // this.getcan();
    },
    async del(row) {
      const res = await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if (res === "confirm") {
        const res = await this.$API.Delcan(this.flid, row.attr_id);
        this.getcan();
      }
    },
    // 键盘回车添加参数tag
    async bjtianjia(row) {
      if (row.inputValue.trim().length === 0) return;
      row.attr_vals.push(row.inputValue);
      const res = await this.$API.Bjcan(this.flid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activename,
        attr_vals: row.attr_vals.join(","),
      });
      row.inputValue = "";
      row.inputVisible = false;
      // this.getcan();
    },
    // 失去焦点
    async shijiao(row) {
      if (row.inputValue.trim().length === 0) return;
      row.attr_vals.push(row.inputValue);
      const res = await this.$API.Bjcan(this.flid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activename,
        attr_vals: row.attr_vals.join(","),
      });
      row.inputValue = "";
      row.inputVisible = false;
      // this.getcan();
    },
    // 点击三级分类
    Change() {
      this.$refs.xiaoshi.dropDownVisible = false;
       this.getcan();
    },
    async getcan() {
      if (this.spcheck.length !== 3) {
        this.$message({
          message: "请选择三级分类",
          type: "error",
        });
        this.manyarr = [];
        this.onlyarr = [];
        return false;
      }
      const res = await this.$API.Flcs(this.flid, this.activename);
      res.forEach((item) => {
        item.inputVisible = false;
        item.inputValue = "";
      });
      // console.log(res);
      if (this.activename === "many") {
        res.forEach((item) => {
          item.attr_vals = item.attr_vals.length !== 0 ? item.attr_vals.split(",") : [];
        });
        this.manyarr = res;
        console.log("candata", this.manyarr);
      } else if (this.activename === "only") {
        res.forEach((item) => {
          item.attr_vals = item.attr_vals.length !== 0 ? item.attr_vals.split(",") : [];
        });
        this.onlyarr = res;
        console.log("onlyarr", this.onlyarr);
      }
    },
    //点击tab栏
    handle() {
      this.getcan();
    },
    async getgoods() {
      const res = await this.$API.Splist();
      this.spshuju = res;
    },
  },
  computed: {
    iss() {
      return this.spcheck.length !== 3 ? true : false;
    },
    flid() {
      return this.spcheck[this.spcheck.length - 1];
    },
  },
  watch: {
    cart: {
      handler(newValue) {},
      deep: true,

      immediate: true,
    },
  },
};
</script>
<style scope>
.el-dialog {
  width: 40%;
}
.el-radio__inner {
  display: none;
  background-color: none;
}
.el-radio {
  position: absolute;
  width: 100%;
  margin-left: -20px;
  height: 30px;
}
</style>
<style scoped lang="scss">
.el-tag {
  margin: 8px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
}
</style>
